/*
 * @Author: shiguo
 * @Date: 2022-03-10 09:14:11
 * @LastEditors: shiguo
 * @LastEditTime: 2022-09-15 16:30:05
 * @FilePath: /@aks-dev/taro-h5/lib/WithLoadingContainer/index.tsx
 */

import { Image, Text, View } from "@tarojs/components";
import * as React from "react";
import { WithLoadingContainerProps, WithLoadingStatus } from '../../types/WithLoadingContainer.d';



export const WithLoadingContainer:
    React.FC<WithLoadingContainerProps>
    = props => {
        const {
            status = WithLoadingStatus.NONE,
            failComponent,
            emptyComponent,
            nomoreComponent,
            reload,
            failText = '网络请求失败，点击重新加载~',
            emptyText = '暂无数据',
            nomoreText = '没有更多数据了～',
        } = props


        const onClick = (e) => {
            e.stopPropagation();
            reload && reload()
        }

        return (
            <>
                {(() => {
                    switch (status) {
                        case WithLoadingStatus.NONE:
                            return null;
                        case WithLoadingStatus.SUCCESS:
                            return props.children;
                        case WithLoadingStatus.LOADING:
                            return <Loading />;
                        case WithLoadingStatus.FAIL:
                            if (failComponent) return failComponent
                            return <View onClick={onClick} style={styles.container}>
                                <Text style={styles.text}>{failText}</Text>
                            </View>;
                        case WithLoadingStatus.EMPTY:
                            if (emptyComponent) return emptyComponent
                            return <View onClick={onClick} style={styles.container}>
                                <Text style={styles.text}>{emptyText}</Text>
                            </View>;
                        case WithLoadingStatus.NOMORE:
                            return (
                                <>
                                    {props.children}
                                    {nomoreComponent ? nomoreComponent : <Text style={styles.text}>{nomoreText}</Text>}
                                </>
                            )
                        default:
                            return <Text style={styles.text}>(^_^)∠※ 送你一束小花</Text>;

                    }
                })()}
            </>
        )
    }



const Loading: React.FC<{}>
    = () => {
        return (
            <View style={styles.container}>
                <Image src={require('./loading3.gif')} style={{ width: '20px', height: '20px' }} mode='aspectFit' />
            </View>
        )
    }


const styles: Record<string, React.CSSProperties> = {
    text: {
        lineHeight: '44px',
        color: '#999999',
        fontSize: '14px',
        textAlign: 'center',
    },
    container: {
        display: 'flex',
        height: '44px',
        justifyContent: 'center',
        alignItems: 'center',
    }
}
